<template>
  <el-dialog :title="`${!this.form.id ? '添加' : '编辑'}工单`" :visible.sync="visible">
    <el-form ref="form" label-width="120px" :rules="rules" :model="form">
      <el-form-item label="人员名称:" prop="userName">
        <el-input
          style="width: 80%"
          type="text"
          v-model="form.userName"
          placeholder="请输入"
          maxlength="5"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item :data="role" label="角色:" prop="roleId">
        <el-select style="width: 80%" placeholder="请选择" v-model="form.roleId">
          <el-option
            v-for="item in role"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          ></el-option>
          <!-- <el-option label="维修员" value="2"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话:" prop="mobile">
        <el-input
          v-model="form.mobile"
          style="width: 80%"
          type="text"
          placeholder="请输入"
          maxlength="11"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item :data="list1" label="负责区域:" prop="list1">
        <el-select  @change="elselect" style="width: 80%" placeholder="请选择" v-model="form.regionName">
          <el-option
            v-for="item in list1"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像:" prop="image">
        <div class="upload-avatar">
          <el-upload
          v-model="form.image"
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :http-request="httpRequest"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <span>支持扩展名：jpg、png，文件不得大于100kb</span>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-checkbox v-model="form.status" >是否启用</el-checkbox>
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="sure">确定</el-button>
          <el-button size="small" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addRegion, fileUpload, region, regionList, roleList } from '@/api/kuser'
export default {
  name: 'DikedeAddOperation',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      imageUrl: '',
      checked: true,
      visible: false,
      form: {},
      rules: {
        userName: [
          { required: true, message: '人员名称必填', trigger: 'blur' },
          { min: 1, max: 5, message: '人员名称最多8位', trigger: 'blur' }
        ],
        role: [{ required: true, message: '角色必选', trigger: 'change' }],
        mobile: [
          { required: true, message: '联系电话必填', trigger: 'blur' },
          { min: 1, max: 11, message: '联系电话为11位', trigger: 'blur' }
        ],
        regionName: [
          { required: true, message: '负责区域必选', trigger: 'change' }
        ],
        image: [{ required: true, message: '头像不可为空', trigger: 'change' }]
        // status: [{ required: true, message: '状态必选', trigger: 'change' }]
      },
      role: [],
      status: '',
      data: {
        pageIndex: 1,
        pageSize: 100000
      },
      list1: [],
      // regionId: 0,
      list2: []
    }
  },
  mounted () {
    this.roleList()
    this.region()
    // this.elselect()
  },

  methods: {
    // 角色
    async roleList () {
      const res = await roleList()
      this.role = res
      console.log(this.role)
    },

    // 图片
    async httpRequest (data) {
      console.log(data)
      const res = await fileUpload({ fileName: data.file })
      console.log(res)
      this.imageUrl = res
      this.form.image = this.imageUrl
    },

    async region () {
      const res1 = await region(this.data)
      console.log(res1)
      this.list1 = res1.currentPageRecords
    },
    elselect (val) {
      console.log(val)
      this.list2 = this.list1.find(item => item.name === val)
      console.log(this.list2)
      this.form.regionId = this.list2.id
      console.log(this.form.regionId)
    },

    // 确定按钮
    async sure () {
      this.$refs.form.validate()
      // this.form.regionId = this.regionId
      console.log(this.form)

      this.form.id ? await regionList(this.form) : await addRegion(this.form)
      this.$message.success(this.form.id ? '员工信息修改成功' : '员工新增成功')
      // this.visible = false
      // this.$parent.personneList()
      //
      // this.form.id ? await regionList(this.form) : await addRegion()
      // this.$message.success(`${this.form.id ? '添加' : '修改'}成功`)
      // this.$refs.form.validate()
      this.visible = false
      this.$parent.personneList()
      this.$refs.form = {}
    },
    // 取消
    cancel () {
      this.visible = false
      this.$refs.form.validate()
      this.form = {}
    },
    handleUploadSuccess (response, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    }
  }
}
</script>

<style lang="less" scoped>
.upload-avatar {
  margin-left: 50px;
  width: 120px;
  height: 120px;
  background-color: #f3f6fb;
  position: relative;
}
span {
  color: #ccc;
  margin-left: -60px;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}
/deep/.el-icon-close:before {
  content: 'X' !important;
}
</style>
